<template>
	<view class="add-bank-card-wrapper">
		<!-- <view class="add-bank-card-form conteainer-public-style  mg24">
			<view class="add-form-item flex-c b-b-1">
				<text class="form-item-label fz26">姓名</text>
				<input class="form-item-input" type="text" placeholder="请输入真实姓名" />
			</view>
			<view class="add-form-item flex-c">
				<text class="form-item-label fz26">身份证号</text>
				<input class="form-item-input" type="text" placeholder="请输入身份证号" />
			</view> 
		</view> -->
		
		<view class="add-bank-card-form conteainer-public-style  mg24">
			<view class="add-form-item flex-c b-b-1">
				<text class="form-item-label fz26">持卡人</text>
				<input class="form-item-input" v-model="cardholder" type="text" placeholder="请输入持卡人真实姓名" />
			</view>
			<view class="add-form-item flex-c">
				<text class="form-item-label fz26">银行名称</text>
				<input class="form-item-input" v-model="bank" type="text" placeholder="请输入银行名称" />
			</view> 
			<view class="add-form-item flex-c b-b-1">
				<text class="form-item-label fz26">银行卡号</text>
				<input class="form-item-input" v-model="bankCardNumber" type="number" placeholder="请输入银行卡号" />
			</view>
			
			<view class="add-form-item flex-c">
				<text class="form-item-label fz26">开户行支行</text>
				<input class="form-item-input" v-model="bankOfDeposit" type="text" placeholder="请输入开户行支行" />
			</view> 
			<!-- <view class="add-form-item flex-c">
				<text class="form-item-label fz26">银行预留号码</text>
				<input class="form-item-input" type="number" placeholder="请输入银行预留号码" />
			</view> --> 
		</view>
		
		<button class="public-large-btn" @click="addBankCard">保存</button>
	</view>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, reactive } from 'vue'
import { createBankCard, editBank } from '@/http/my'
import { onLoad} from '@dcloudio/uni-app'
import { IBank } from './bankCard.vue'


export default defineComponent({
	setup() { 
		const state = reactive<IBank>({
			id: 0,
			cardholder: '',
			bank: '',
			bankCardNumber: '',
			bankOfDeposit: '',
			identity: ''
		})
		
		onLoad((option: any) => {
			if(option.bank) {
				let {id, cardholder, bankCardNumber, bank, bankOfDeposit, identity} = JSON.parse(option.bank)
				state.bank = bank
				state.cardholder = cardholder
				state.bankCardNumber = bankCardNumber
				state.bankOfDeposit = bankOfDeposit
				state.identity = identity
				state.id = id
			}
			console.log(option);
		})
		
		const addBankCard = async () => {
			let res: any;
			if(state.cardholder == '') {
				uni.showToast({ title: '输入持卡人姓名', icon: 'none' })
				return 
			}
			if(state.bank == '') {
				uni.showToast({ title: '输入银行名称', icon: 'none' })
				return 
			}
			if(state.bankCardNumber == '') {
				uni.showToast({ title: '输入银行卡号', icon: 'none' })
				return 
			}
			if(state.bankOfDeposit == '') {
				uni.showToast({ title: '输入开户行名称', icon: 'none' })
				return 
			}
			if(state.id) {
				res = await editBank(state)
			} else {
				delete state.id
				delete state.identity
				res = await createBankCard(state)
			}
			
			if(res.code === 0) {
				uni.showToast({
					title: state.id ? '编辑成功' : '添加成功',
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: state.id ? '编辑失败' : '添加失败',
					icon: 'error'
				})
			}
		}
		return {
			addBankCard,
			...toRefs(state)
		}
	}
})
</script>
<style>page{ background-color: #f8f8fa;}</style>
<style lang="scss" scoped>
.add-bank-card-wrapper{
	.add-bank-card-form{
		.add-form-item{
			height: 100rpx;
			.form-item-label{
				width: 200rpx;
			}
			.form-item-input{
				flex: 1;
				height: 30rpx;
				font-size: 28rpx;
			}
		}
	}
}
</style>